import React from 'react'
// 引入路由文件
import { BrowserRouter as Router, Route, Link } from "react-router-dom"


const Index = () => (<p>我是首页</p>)

class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <h4>你好呀我是路由</h4>
                    <Link to="/index">首页</Link><br />
                    <Link to="/com">组件页</Link>
                    <Route path="/com" component={Index}></Route>
                </div>
            </Router>
        )
    }
}



// 编程式导航
// 登陆页面
const Layout = (props) => {
    function goLogin() {
        // 去注册页面
        props.history.push('./login')
    }
    return (
        <div>
            <div>我式登陆页面，点击跳转去注册页面</div>

            <button onClick={goLogin}>去注册页面</button>
        </div>
    )
}
// 注册页面
const Login = (props) => {
    function goLayout() {
        props.history.go(-1)
    }
    return (
        <div>
            <div>我是注册面，点击跳转去登录页面</div>
            <button onClick={goLayout}>到登录页面</button>
        </div>
    )
}

class Ro extends React.Component {
    render() {
        return (
            <Router>
                <div>
                    <h2>我是BraveY</h2>
                    <Link to="/login">注册</Link><br />
                    <Link to="/layout">主页</Link>
                    <h1>------------------</h1>
                    <Route path="/login" component={Login}></Route>
                    <Route path="/layout" component={Layout}></Route>
                    <Route path="/" component={Layout}></Route>
                    <Route exact path="/" component={Layout}></Route>
                </div>
            </Router>
        )
    }
}


// 默认路由
{/* <Route path="/" component={Layout}></Route> */ }
// 精准匹配
{/* <Route path="/" component={Layout}></Route> */ }








export default Ro